<template>
	<view @touchmove.stop.prevent>
		<view class="s-popup-class s-bottom-popup" :class="{'s-popup-show':show}" :style="{background:bgcolor,height:height?height+'rpx':'auto'}">
			<slot></slot>
		</view>
		<view class="s-popup-mask" :class="[show?'s-mask-show':'']" v-if="mask" @tap="handleClose"></view>
	</view>
</template>

<script>
	export default {
		name: "sBottomPopup",
		props: {
			//是否需要mask
			mask: {
				type: Boolean,
				default: true
			},
			//控制显示
			show: {
				type: Boolean,
				default: false
			},
			//背景颜色
			bgcolor: {
				type: String,
				default: "#fff"
			},
			//高度 rpx
			height: {
				type: Number,
				default: 0
			}
		},
		methods: {
			handleClose() {
				if (!this.show) {
					return;
				}
				this.$emit('close', {});
			}
		}
	}
</script>
<style lang="scss" scoped>
@import 's-bottom-popup.scss';
</style>
